<template>
  <!-- <Card size="small" title="商品分类" :style="{width: '100%', height: `${height}px` }"> -->
  <Card size="small" title="全部分类" :style="{width: '100%', height: '100%' }">
    <!-- <template #extra>
      <Icon title="刷新分类" icon="icons8:refresh" @click="getCateList(true)"/>
    </template> -->
    <Tree
v-model:selectedKeys="cateIdListRef"
    v-if="treeDataRef.length > 0"
    :draggable="false"
    :block-node="true"
    :show-line="false"
    :show-icon="false"
    :default-expand-all="cateExpandAllRef"
    :fieldNames="{key: 'ID', title: 'name', children: 'children',}"
    :tree-data="treeDataRef"
    @select="handleSelectTree"
    >
      <template #title="{ dataRef, }">
        <div v-if="dataRef.icon"><Icon :icon="dataRef.icon" style="width:1rem;" /> {{dataRef.name}}</div>
        <div v-else><span style="display:inline-block;width:0px;"></span>{{dataRef.name}}</div>
      </template>
    </Tree>
  </Card>

</template>
<script lang="ts" name="GoodsModalOfCateSide" setup>
import type { TreeProps, } from 'ant-design-vue';
import { Card, Tree } from 'ant-design-vue';
import { ref } from 'vue';
import { Icon, } from '/@/components/Icon/index';
import { useMessage } from '/@/hooks/web/useMessage';

import { getListData, } from '/@/api/wms/goods-cate';

const {createMessage, createConfirm,} = useMessage();
const {info, success, warning, error} = createMessage;

const height = window.innerHeight - 55;

const cateIdListRef = ref([])
const cateExpandAllRef = ref(true)
const treeDataRef = ref<TreeProps['treeData']>([])

const spin = ref(false)
const getCateList = (tip?:boolean) => {
  if (tip) spin.value = true
  getListData().then(dd => {
    treeDataRef.value = dd as any
    if (tip) success('分类，刷新成功')
  }).finally(() => spin.value = false)
}
getCateList()

const emits = defineEmits(['select-change',]);

const handleSelectTree = (selectedKey,) => {
  emits('select-change', selectedKey)
}

</script>

<style scoped>
:deep().ant-tree-treenode {
  padding: 2px;
  font-size: 1rem;
}
</style>
